<template>
  <div class="message" v-loading="loading">
    <div class="top">
      <div class="search">
        <div class="contition">
          <div class="wrap_time">
            <date-time @changeType="changeType" type="other_half_hour" :query="query" @isFold="isShowFold" :isTimePeriod = "true"></date-time>
            <el-button type="primary" class="primary_btn fr find" @click.stop='search(true)'>{{$t('public.search2')}}</el-button>
            <div class="clear"></div></div>
          <div class="wrap_drop">
            <unfold :isShow="isFold" :title="[]">
              <template slot="unfoldSlot">
                <div class="accs">
                  <span class="access">{{$t('report.imAccessId')}}：</span>
                  <el-select size="mini" v-model.trim="selectedAccessIdList" multiple filterable :placeholder="$t('report.searchByName')">
                    <el-option
                      v-for="item in accessIdOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value">
                    </el-option>
                  </el-select>
                </div>
              </template>
            </unfold>
          </div>
        </div>
      </div>
      <affix :label="title"></affix>
    </div>
    <div :id="id">
      <el-row class="ichars">
        <highcharts class="ichar" :class="{'hide' : highchartsType != 'lateral'}" :options="highchartsOptionsX"></highcharts>
        <highcharts class="ichar" :class="{'hide' : highchartsType == 'lateral'}" :options="highchartsOptionsY"></highcharts>
        <div class="notes">
          <span class="light">{{$t('report.hicharsNotes')}}: <span></span>{{$t('report.hicharsLight')}}</span>
          <span class="dark"><span></span>{{$t('report.hicharsDark')}}</span>
        </div>
      </el-row>
      <div class="tab">
        <div class="export">
          <el-button class="primary_btn fr set_header" v-show="!isBack && configFormula" @click="$refs.formulaEditorDialog.open()">{{$t('report.formalTitle')}}</el-button>
          <el-button class="primary_btn fr set_header" v-show="!isBack" v-on:click.stop="config" v-if="!configHeaderBool">{{$t('report.setHeaderConfig')}}</el-button>
          <el-button class="primary_btn fr" v-show="!isBack" @click.stop="changeHighChartsType">{{comparisonBtnLabel}}</el-button>

          <!-- <el-button class="primary_btn fr pdf"
            v-if="$store.getters.exportFromEnd && !isEcommerce"
            @click.stop="exportXls"
             v-show="!isBack"
          >{{$t('report.exportXls')+($store.state.xlsxExportMode==='Both'?'(旧)':'')}}</el-button> -->

          <el-button class="primary_btn fr pdf"
            v-if="!isEcommerce"
            @click.stop="exportXlsx"
            v-show="!isBack"
          >{{$t('report.exportXls')}}</el-button>

          <el-button class="primary_btn fr pdf" @click.stop="exportPdf">{{$t('report.exportPDF')}}</el-button>
          <el-button class="primary_btn fr pdf" v-show="isShowDetailExport && !isEcommerce" v-on:click.stop="exportXls(true)">{{$t('report.imExportDetailXls')}}
          </el-button>
          <el-button class="primary_btn fr pdf" v-show="!isBack && !isEcommerce" v-on:click.stop="turnFromLook">
            <span v-show="!isAccess">{{$t('report.accessLook')}}</span>
            <span  v-show="isAccess">{{$t('report.channelLook')}}</span>
          </el-button>

        </div>
        <breadCrumb v-show="isBack" @back="cancel" :titleArr="titleArr"></breadCrumb>
        <div class="deploy">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <span class="fl explain">{{$t('report.toggleInstructe')}}</span>
              </template>
              <div>
                1. {{$t('report.imPersonSessionNum')}}<br>
                2. {{$t('report.askTotalCount')}}<br>
                3. {{$t('report.exchangeRate')}}<br>
                4. {{$t('report.robotDealSayNum')}}<br>
                5. {{$t('report.robotMessageCount')}}<br>
                6. {{$t('report.leavemsgCount')}}<br>
                7. {{$t('report.messageCount')}}<br>
                8. {{$t('report.queueGiveUpCount')}}<br>
                9. {{$t('report.activeClaimRobotSessionCount')}}<br>
                10. {{$t('report.imSeatInviteNum')}}<br>
                11. {{$t('report.averSationTime')}}<br>
                12. {{$t('report.averResponseTime')}}<br>
                13. {{$t('report.initiatingNumber')}}<br>
                14. {{$t('report.visitorCount')}}<br>
                15. {{$t('report.imTurnCustomNum')}}<br>
                16. {{$t('report.imEveryAskNum')}}<br>
                17. {{$t('report.imEveryClickNum')}}<br>
                18. {{$t('report.imFineSessionNum1')}}<br>
                19. {{$t('report.imBadSessionNum1')}}<br>
                20. {{$t('report.imKindSessionNum1')}}<br>
                21. {{ $t('report.sessionsQueueCount')}}<br/>
                22. {{ $t('report.SessionTimeTrendTableOne')}}<br/>
                23. {{ $t('report.agentSessionsNumber')}}<br/>
                <p class="custom_alg">{{$t('report.ziDingYi')}}：</p>
                <p v-for="(item, index) in formulas" :key="item.name">
                  {{index + 24}}.{{item.formulaInstr}}
                </p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <report-table v-if="!isBack" @chnnalType="chnnalType" :isShowDetailExport="isShowDetailExport" :data="serveNumData" :sum="sum" :config="[...headOptions.Config,  ...formulasConfig]"></report-table>
        <report-table v-if="isBack" :data="detailServerData" :sum="detailTotal" :config="[...detailHeadOptions.Config,  ...formulasConfig]"></report-table>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('report.reportExportHelp')" :visible.sync="dialogVisible" width="30%">
      <span>{{$t('report.reportExportTipTitle')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="dialogVisible = false">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" class="primary_btn" @click="confirm">{{$t('public.confirm')}}</el-button>
      </span>
    </el-dialog>
    <!-- 自定义公式组件 -->
    <FormulaEditorDialog ref="formulaEditorDialog" :headOptionsConfig="headOptions.Config" @closeFormulaDialog="closeFormulaDialog" reportName="会话数时间趋势报表" :reportType="id"/>
    <header-option v-show="isHeaderConfigShow" :headCustom="formulasConfig" :show="isHeaderConfigShow" :option="headOptionsShow" :type="id" v-on:close="close"></header-option>
  </div>
</template>
<script>
  import affix from '../../../ui-modules/affix/Affix.vue'
  import breadCrumb from '../../../ui-modules/breadCrumb/monitorBreadCrumb.vue'
  import unfold from '../../../ui-modules/unfold/index.vue'
  import dateTime from '../base/datetime.vue'
  import reportTable from '../base/reportTableNew.vue'
  import headerOption from '../base/headerOption.vue'
  import { deepClone, getFormatTimeBySecond, optionTimeTypeCheck, isHasFunc } from '@/utils/m7Utils.js'
  import { exportReportPdf, headOptionsToXlsxHeaders, checkTime, searchTime, colorConfigArr, mixData } from '@/utils/reportUtils.js'
  import * as XlsxUtil from 'src/utils/XlsxUtil.umd.js'
  import {sortBy} from 'lodash'
  import FormulaEditorDialog from '../base/FormulaEditorDialog.vue'
  export default {
    name: 'im_report_message',
    data () {
      return {
        configFormula: true, // 自定义公式的权限
        isAccess: false, // 是否为接入号查询
        isEcommerce: this.$store.getters.isEcommerce ? true : false,
        isBack: false, // 是否展示返回上页
        titleArr: [this.$t('report.imReportMessage')],
        dateType: 'day', // 当前选择时间类型
        isFold: false,
        id: 'im_report_message',
        title: this.$t('report.imReportMessage'),
        loading: false,
        query: {},
        serveNumData: [], // 表格数据
        sum: [], // 合计
        dialogVisible: false,
        platformOptions: [ // 定义来源数据
          { label: this.$t('report.imPlatform.pc'), value: 'pc' },
          { label: this.$t('report.imPlatform.wap'), value: 'wap' },
          { label: this.$t('report.imPlatform.sdk'), value: 'sdk' },
          { label: this.$t('report.imPlatform.weibo'), value: 'weibo' },
          { label: this.$t('report.imPlatform.wxmini'), value: 'wxmini' },
          { label: this.$t('report.imPlatform.weixin'), value: 'weixin' },
          { label: this.$t('report.imPlatform.enterprise'), value: 'wxwork'},
          { label: this.$t('report.imPlatform.baiduBCP'), value: 'ocpc'},
          { label: this.$t('webchat.TikTok'), value: 'dy'},
          { label: this.$t('webchat.platformWXKF'), value: 'wxkf'}
        ],
        accessIdOptions: [], // 接入号数据
        selectedAccessIdList: [], // 接入号绑定值
        headOptions: { Config: [], data: [] }, // 表头数据
        headOptionsShow: { Config: [], data: [] },
        detailHeadOptions: { Config: [], data: [] }, // 详细数据得表头
        detailServerData: [], // 详细数据表格数据
        detailTotal: [], // 详细数据得合计
        isHeaderConfigShow: false,
        serverData: [],
        highchartsType: 'lateral', // 切换横纵对比标识
        comparisonBtnLabel: this.$t('report.lateralComparison'),
        highchartsDefaultOptions: {
          chart: { type: 'column', animation: false },
          colors: colorConfigArr,
          xAxis: {
            categories: [],
            title: {
              enabled: true,
              text: '',
              style: { fontWeight: 'normal' }
            }
          },
          yAxis: {
            gridLineColor: '#e6e6e6',
            allowDecimals: false,
            title: { text: '' },
            showEmpty: false
          },
          title: { text: this.$t('report.imReportMessage') },
          legend: { align: 'center', verticalAlign: 'top', y: 30 },
          tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}{point.valueSuffix}</b><br/>',
            shared: true
          },
          credits: { enabled: false },
          series: []
        },
        isSearch: false,
        highchartsOptionsX: {},
        highchartsOptionsY: {},
        formulas: [] // 公式数据
      }
    },
    watch: {
      // 监测自定义公式变化 更新数据
      formulas (cur, old) {
        if (this.isSearch) {
          return
        }
        if (!this.serverData || this.serverData.length === 0) {
          return
        }
        this.serverData = mixData(deepClone(this.serverData), this.formulas)
      }
    },
    components: {
      affix,
      unfold,
      dateTime,
      reportTable,
      headerOption,
      breadCrumb,
      FormulaEditorDialog
    },
    computed: {
      // 自定义表头
      formulasConfig () {
        return this.formulas.map((d, i) => {
          return {
            displayname: d.displayname,
            name: d.name,
            order: d.order,
            show: d.show,
            timeType: 'none',
            digits: d.digits,
            type: d.type
          }
        })
      },
      // 是否展示导出详细excel
      isShowDetailExport () {
        let type = ['month']
        return type.includes(this.dateType)
      },
      configHeaderBool () {
        return this.$store.state.report.setConfigHeaderBool
      }
    },
    methods: {
      newHighchartsOptionsX () {
        let options = deepClone(this.highchartsDefaultOptions)
        if (!this.serverData || this.serverData.length === 0) {
          return options
        }
        let headerConfig = this.headOptions.Config || []
        let datas = this.serverData
        let categoriesArray = []
        let seriesArray = []
        headerConfig.forEach(item => {
          if (!item.show) {
            return
          }
          if (item.name === 'platform') {
            return
          }
          let serie = { name: item.displayname, data: [], valueName: item.name }
          if (item.name === 'averageSessionTimeLength' || item.name === 'averageFirstResponseTimeLength') {
            serie.tooltip = { valueSuffix: 's' }
          } else if (item.name === 'sessionRate') {
            serie.tooltip = { valueSuffix: '%' }
          }
          seriesArray.push(serie)
        })

        for (let i = 0; i < datas.length; i++) {
          categoriesArray.push(this.getPlatformName(datas[i].platform || datas[i].accessId))
          for (let j = 0; j < seriesArray.length; j++) {
            seriesArray[j].data.push(datas[i][seriesArray[j].valueName])
          }
        }
        options.xAxis.categories = categoriesArray
        options.series = seriesArray

        return options
      },
      newHighchartsOptionsY () {
        let options = deepClone(this.highchartsDefaultOptions)
        if (!this.serverData || this.serverData.length === 0) {
          return options
        }
        let headerConfig = this.headOptions.Config || []
        let datas = this.serverData
        let categoriesArray = []
        let seriesArray = []

        datas.forEach(item => {
          let serie = { name: this.getPlatformName(item.platform || item.accessId), data: [], valueName: item.platform || item.accessId }
          seriesArray.push(serie)
        })

        for (let i = 0; i < headerConfig.length; i++) {
          if (!headerConfig[i].show || headerConfig[i].name === 'platform') {
            continue
          }
          categoriesArray.push(headerConfig[i].displayname)
          for (let j = 0; j < seriesArray.length; j++) {
            for (let k = 0; k < datas.length; k++) {
              if (datas[k].platform === seriesArray[j].valueName || datas[k].accessId === seriesArray[j].valueName) {
                if (headerConfig[i].name === 'averageSessionTimeLength' || headerConfig[i].name === 'averageFirstResponseTimeLength') {
                  seriesArray[j].data.push({ y: datas[k][headerConfig[i].name], valueSuffix: 's' })
                } else if (headerConfig[i].name === 'sessionRate') {
                  seriesArray[j].data.push({ y: datas[k][headerConfig[i].name], valueSuffix: '%' })
                } else {
                  seriesArray[j].data.push(datas[k][headerConfig[i].name])
                }
              }
            }
          }
        }

        options.xAxis.categories = categoriesArray
        options.series = seriesArray

        return options
      },
      // 切换查询方式
      turnFromLook () {
        this.isAccess = !this.isAccess
        this.search()
      },
      // 自定义公式弹窗关闭外抛事件
      closeFormulaDialog () {
        this.isSearch = false
        this.$store.dispatch('queryFetchFormula', {type: this.id}).then((resp) => {
          if (resp.success) {
            this.formulas = resp.data.Formulas
          }
        })
      },
      cancel () {
        this.isBack = false
      },
      chnnalType (id, name) {
        this.isBack = true
        this.titleArr.splice(1, 1, name)
        this.search(id)
      },
      // 子组件切换时间类型传上来得方法 触发计算属性
      changeType (type) {
        this.dateType = type
      },
      // 处理table数据
      getTableData (serverData, headOptions, bool) {
        if (!serverData || serverData.length === 0) {
          return []
        }

        let data = deepClone(serverData)
        // 接入名称和时间处理
        data.forEach(item => {
          if (bool) {
            item.platform = item._id
          } else {
            item.platform = this.getPlatformName(item.accessId || item.platform)
          }
          headOptions.Config.forEach((option, index) => {
            if (option.name.indexOf('Rate') > -1 && option.displayname.indexOf('率') > -1) {
              item[option.name] = `${item[option.name]}%`
            }
            if (option.timeType && option.timeType === 'hhmmss') {
              item[option.name] = getFormatTimeBySecond(item[option.name])
            } else if (option.timeType && option.timeType === 'second') {
              item[option.name] = Math.round(item[option.name]) + 's'
            }
          })
        })
        if (bool) {
          return sortBy(data, 'platform')
        }
        data = data.filter(item => !!item.platform)
        return data
      },
      getTotalData (serverData, headOptions) {
        if (!serverData || serverData.length === 0) {
          return [{platform: this.$t('report.total')}]
        }

        let headerConfig = headOptions.Config || []
        let datas = serverData
        let total = {
          platform: this.$t('report.total'),
          sessionTotalTimeLength: 0,
          firstResponseTotalTimeLength: 0,
          finishSessionCount: 0,
          responseTotalCount: 0
        }

        for (let i = 0; i < headerConfig.length; i++) {
          if (headerConfig[i].name === 'platform') {
            continue
          }
          for (let j = 0; j < datas.length; j++) {
            if (!isNaN(datas[j][headerConfig[i].name])) {
              if ((headerConfig[i].name in total) === false) {
                total[headerConfig[i].name] = 0
              }
              total[headerConfig[i].name] += datas[j][headerConfig[i].name]
            }

            if (headerConfig[i].name === 'averageSessionTimeLength') {
              total.sessionTotalTimeLength += datas[j]['sessionTotalTimeLength']
              total.finishSessionCount += datas[j]['finishSessionCount']
            } else if (headerConfig[i].name === 'averageFirstResponseTimeLength') {
              total.firstResponseTotalTimeLength += datas[j]['firstResponseTotalTimeLength']
            }
          }
        }

        // 对话率
        total.sessionRate = total.sessionCount ? Math.round((total.responseTotalCount / total.sessionCount) * 100) + '%' : 0 + '%'
        // 平均对话时长
        total.averageSessionTimeLength = total.finishSessionCount > 0 ? Math.round(total.sessionTotalTimeLength / total.finishSessionCount) : 0
        // 平均首次响应时长
        total.averageFirstResponseTimeLength = total.responseTotalCount ? Math.round(total.firstResponseTotalTimeLength / total.responseTotalCount) : 0
        total = mixData([total], this.formulas)[0]
        headOptions.Config.forEach((option, index) => {
          if (option.timeType && option.timeType === 'hhmmss') {
            total[option.name] = getFormatTimeBySecond(total[option.name])
          } else if (option.timeType && option.timeType === 'second') {
            total[option.name] = total[option.name] + 's'
          }
        })
        return [total]
      },
      isShowFold (bool) {
        this.isFold = bool
      },
      // 获取来源名称（接入号没发现有返回）
      getPlatformName (id) {
        if (!this.isAccess && !this.selectedAccessIdList.length) {
          for (let i = 0; i < this.platformOptions.length; i++) {
            if (this.platformOptions[i].value === id) {
              return this.platformOptions[i].label
            }
          }
        } else {
          for (let i = 0; i < this.accessIdOptions.length; i++) {
            if (this.accessIdOptions[i].value === id) {
              return this.accessIdOptions[i].name
            }
          }
          return this.$t('report.imReportDeletedAccess')
        }
      },
      getSearchQueryData (id) {
        let data = {
          reportType: this.id,
          account: this.$store.state.session.user.account,
          query: { reportType: this.id }
        }
        let query = deepClone(this.query)
        if (query.timeType === 'other_half_hour') {
          // 校验类型与时间
          let message = checkTime(query.StartTime, query.EndTime, false, false)
          if (message !== true) {
            this.$message.error(this.$t(message))
            return
          }
        }
        if (this.selectedAccessIdList.length > 0) {
          query.selectedAccessIdList = this.selectedAccessIdList.join(',')
        } else {
          if (this.isAccess) {
            // let accessIdList = []
            // this.accessIdOptions.map(item => {
            //   accessIdList.push(item.value)
            // })
            // query.selectedAccessIdList = accessIdList.join(',')
            data.query.isAccessId = true
          }
        }

        if (id) {
          if (this.selectedAccessIdList.length === 0 && !this.isAccess) {
            query.platform = id
          } else {
             query.selectedAccessIdList = id
          }
          query.selectChildNode = true
        }
        data.query = Object.assign({}, data.query, query)
        return data
      },
      search (id) {
        if (typeof id === 'string'){
          var queryData = this.getSearchQueryData(id)
        } else {
          var queryData = this.getSearchQueryData()
        }
        if (id === true) {
          this.isBack = false
        }
        if (!queryData) {
          return
        }
        var query = queryData.query
        this.loading = true
        this.$store.dispatch('queryImMessageReport', queryData).then((res) => {
          if (this.$store.state.report.customExportData) {
            res = JSON.parse(this.$store.state.report.customExportData)
          }
          if (!res.success) {
            this.loading = false
            return
          }
          if (typeof id === 'string'){
            this.detailHeadOptions = optionTimeTypeCheck(deepClone(res.tableHeader) || this.detailHeadOptions)
            this.detailServerData = this.getTableData(mixData(res.data, this.formulas), this.detailHeadOptions, true)
            this.detailTotal = this.getTotalData(res.data, this.detailHeadOptions)
            this.loading = false
            return
          }
          //  图表标题 加入 定时段的 时间
          let highchartsTitle = ''
          if (query.timePeriod) {
            let timePeriodStartStr = query.timePeriodStart || '00:00'
            let timePeriodEndStr = query.timePeriodEnd || '23:59'
            highchartsTitle = '(' + timePeriodStartStr + '~' + timePeriodEndStr + ')'
          }
          this.highchartsDefaultOptions.title.text = this.$t('report.imReportMessage') + highchartsTitle
          this.$store.dispatch('queryFetchFormula', {type: this.id}).then((resp) => {
            if (resp.success) {
              this.formulas = resp.data.Formulas
              // 表头
              this.headOptions = optionTimeTypeCheck(deepClone(res.tableHeader) || this.headOptions)
              this.serverData = deepClone(mixData(res.data, this.formulas)) || deepClone(mixData(this.serverData, this.formulas))
              this.serveNumData = this.getTableData(this.serverData, this.headOptions)
              this.sum = this.getTotalData(this.serverData, this.headOptions)
              this.highchartsOptionsX = this.newHighchartsOptionsX()
              this.highchartsOptionsY = this.newHighchartsOptionsY()
              this.loading = false
            }
          })
        })
      },
      // 报表导出前端
      exportXlsx () {
        var queryData = this.getSearchQueryData()

        if (!queryData) {
          return
        }
        this.loading = true
        this.$store.dispatch('queryImMessageReport', queryData).then((res) => {
          if (this.$store.state.report.customExportData) {
            res = JSON.parse(this.$store.state.report.customExportData)
          }
          if (!res.success) {
            this.loading = false
            return
          }
          this.loading = false
          var headOptions = optionTimeTypeCheck(deepClone(res.tableHeader) || [])
          var serverData = mixData(deepClone(res.data), this.formulas) || []
          var sum = []
          if (serverData.length !== 0) {
            sum = this.getTotalData(serverData, headOptions)
          }

          var tableData = this.getTableData(serverData, headOptions).concat(sum)
          var headers = headOptionsToXlsxHeaders([...headOptions.Config, ...this.formulasConfig])

          var dh = XlsxUtil.getDownloadHelper(headers, tableData)
          var timeStamp = XlsxUtil.dateFormat(new Date(), 'yyyy-MM-dd hh-mm-ss')
          dh.download(this.$t('report.imReportMessage') + timeStamp)
        })
      },
      // 报表导出后端
      exportXls (bool) {
        let data = {
          Method: 'exportImMessage',
          Query: { reportType: this.id, user: this.$store.state.session.user._id }
        }
        // 导出详细excel更改method
        if (bool === true) {
          data.Method = 'exportImMessageDetail'
          if (this.isAccess) {
            data.Query.isAccessIdLook = true
          }
        }
        let query = deepClone(this.query)
        if (query.timeType === 'other_half_hour') {
          // 校验类型与时间
          let message = checkTime(query.StartTime, query.EndTime, true, false)
          if (message !== true) {
            this.$message.error(this.$t(message))
            return
          }
        }
        if (this.selectedAccessIdList.length > 0) {
          query.selectedAccessIdList = this.selectedAccessIdList.join(',')
        }
        data.Query = Object.assign({}, data.Query, query)
        this.$store.dispatch('exportImMessageReport', data)
      },
      // 切换横纵对比
      changeHighChartsType () {
        if (this.highchartsType === 'lateral') {
          this.highchartsType = 'longitudinal'
          this.comparisonBtnLabel = this.$t('report.lateralComparison')
        } else if (this.highchartsType === 'longitudinal') {
          this.highchartsType = 'lateral'
          this.comparisonBtnLabel = this.$t('report.longitudinalComparison')
        }
      },
      close (data) {
        if (data) {
          this.search()
        }
        this.isHeaderConfigShow = false
      },
      exportPdf () {
        this.dialogVisible = true
      },
      confirm () {
        this.dialogVisible = false
        exportReportPdf({title: this.$t('report.webchat') + this.$t('report.imReportMessage') + searchTime(this.query), id: this.id})
      },
      // 配置表头, 并展示配置表头弹窗
      config () {
        this.$store.dispatch('getReportTableHeader', 'im_report_message').then((res) => {
          this.headOptionsShow = optionTimeTypeCheck(res)
          this.isHeaderConfigShow = !this.isHeaderConfigShow
        })
      },
    },
    beforeMount () {
      if (isHasFunc('func_forbid_config_formula', this.$store.state.session.user)) {
        this.configFormula = false // 没有自定义公式的配置权限
      }
      let type = this.isEcommerce ? 'ecommerceAccessId' : 'accessIds'
      this.$store.dispatch('getCache', { type: type }).then(accessIds => {
        this.accessIdOptions = accessIds.map(accessId => ({ label: `${accessId.name}[${accessId.platform}]`, name: accessId.name, platform: accessId.platform, value: accessId._id }))
        this.search()
      })
    },
    // 避免首次渲染图表展示不全
    mounted () {
      let ichar = document.getElementsByClassName('ichar')
      let width = ichar[0].offsetWidth
      ichar[0].style.width = width + 'px'
      ichar[1].style.width = width + 'px'
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .hide
    position absolute
    width 100%
    z-index -40
    display none
  .deploy
    margin-top 10px
    .el-collapse
      border-bottom none
  .message
    .accs
      margin 14px 0 0px 0px
    .set_header
      margin-left 10px
    .access
      margin-right 10px
    .el-select
      width 600px
</style>
